<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('接口排序')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/css/choose_data_map.css}" rel="stylesheet" />
    <link th:href="@{/js/plugins/dragula/dragula.css}" rel="stylesheet"/>
    <script th:src="@{/js/plugins/dragula/dragula.js}"></script>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight add-question">
    <div class="row">
        <div class="col-sm-11" style="float: inherit;margin: 0 auto;" id="interfaceList">
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script id="InterfaceListTpl" type="text/template">
    <div class="list-interface">
     {{# layui.each(d.list, function(index, a){ }}
        <div class="list-item mb-12 no-top" data-id="{{a.id}}" >
            <span class="col-md-1" title="身份人员编号">
                <img src="/img/Icon-yidongshu.png" class="icon">
            </span>
            <span class="col-md-3" title="roleMemberCode">{{a.interfaceName}}</span>
        </div>
     {{# }); }}
    </div>
</script>
<script th:inline="javascript">
    var prefix = ctx + "page/page/new";
    var pageId = [[${pageId}]];
    queryInterfaceByPageId();
    function queryInterfaceByPageId() {
        var config = {
            url:  prefix + "/queryInterfaceByPageId",
            type: "GET",
            data: {pageId:pageId},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var paramsTplHtml = $("#InterfaceListTpl").html();
                    laytpl(paramsTplHtml).render(data, function (html) {
                        $("#interfaceList").empty();
                        $("#interfaceList").append(html);
                    });
                    initListInterfaceDragula();
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    function submitHandler() {
        var interfaceList = [];
        var sortNum = 1;
        $(".list-interface").find('.list-item').each(function(){
            var data = {};
            data.pageId = pageId;
            if ($(this).attr('data-id')) {
                data.interfaceId = $(this).attr('data-id');
            }
            data.sortNum = sortNum;
            sortNum ++;
            interfaceList.push(data);
        });
        var config = {
            url: prefix + "/updatePageInterfaceSort",
            type: "post",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: JSON.stringify(interfaceList),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $.modal.close();
                    parent.pageList();
                    parent.tabClick(2);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    function initListInterfaceDragula() {
        var containers = $('.list-interface').toArray();
        dragula(containers, {
            accepts: function(el, target, source, sibling) {
                return target == source;
            }
        }).on('drop', function(el, container) {
        })
    }
</script>
</body>
</html>